//获取元素对象
var body = document.getElementById('body');
//每一行
var trs = body.getElementsByClassName('tr');
//每行前面的复选框
var cb = body.getElementsByClassName('input');
//删除键
var del = document.getElementById('bthDeleted');
//全选 反选 复选框
var all = document.getElementById('all');
//最上面一行文字
var txt = document.getElementById("txt");

//自定义对象：设置不同的颜色（奇偶行 鼠标移入行）
//该对象包含:3个属性分别设置3种不同的颜色 1个方法:给传入的参数对象设置颜色
var RowsColor = {
	//	odd:"gray",
	//	even:"white",
	//	selected:"red",

	setColor: function(trs) {
		//循环操作每一行
		for(var i = 0; i < trs.length; i++) {
			//原来的颜色
			trs[i].originColor = (i % 2 == 0 ? "white" : "gray")
			//设置奇偶行颜色
			trs[i].style.background = trs[i].originColor;
			//默认奇偶行颜色

			//trs[i].style.background=(i%2==0?"white":"gray");
			//鼠标移入颜色
			trs.onmouseover = function() {
				this.style.background = "red";
			}
			//鼠标移出颜色:原来的颜色
			trs.onmouseleave = function() {
				this.style.background = this.originColor;
			}
		}
	}
};


//2 显示文字：记录选择的数字
 function displayNumber(){
 	//邮件总数
 	var total=0;
 	//选中邮件数目
 	var count=0;
 	//循环操作：复选框被选中 count++
 	for(var i=0;i<cb.length;i++){
 		if(cb[i].checked){
 			count++;
 		}
 	}
 	txt.innerHTML="一共有" + total+"封邮件，你选中了"+count+"封邮件";
 	
 }
 // 3第一个复选框：全选反选
 /*
  * 循环操作：根据全选复选框是否被选中来设置每一行前面的复选框
  * 2调用显示文字的函数
  */
 function allSelect(){
 	for(var i=0;i<trs.length;i++){
 	cb[i].checked=this.checked;
 }
 	displayNumber();
 }
 function delectEvent(){
 	for(var i=0;i<trs.length;i++){
 		if(cb[i].checked){
 			trs[i].parentElement.removeChild(trs[i]);
 			i--;
 		}
 	}
 }
 
//设置每一行颜色(3种)
RowsColor.setColor(trs);
// 调用显示文字函数
displayNumber();
//给按钮添加全选、反选功能
all.onclick=allSelect();
//4 每一行的复选框：单个选中或取消，影响显示文字
for(var i=0;i<cb.length;i++){
	cb[i].onclick=function(){
		displayNumber();
	}
}
//删除
del.onclick=delectEvent();